<template>
  <div>
    <van-nav-bar
        title="城市列表"
        left-arrow
        @click-left = "backFind"
      />
     <div>
      <van-index-bar :index-list="indexList">
        <div v-for="item in cityList" :key="item.letter">
        <van-index-anchor :index="item.letter">{{item.letter}}</van-index-anchor>
          <van-cell v-for="row in item.list" :key="row.pinyin" :title="row.label" />
      </div>
      </van-index-bar>
     </div>
  </div>
</template>

<script>
import { ctiyApi, hotCity } from '@/api'
export default {
  data () {
    return {
      indexList: [],
      cityList: [],
      hotList: []
    }
  },
  methods: {
    backFind () {
      // 跳转回去
      this.$router.push('/layout/find')
    }
  },
  async  created () {
    const res = await ctiyApi({ level: 1 })
    // console.log(res)
    const city = res.data.body
    // console.log(city)
    const cityItem = {}
    city.forEach(item => {
      const initials = item.short[0].toUpperCase()
      // console.log(initials)
      if (cityItem[initials]) {
        cityItem[initials].push(item)
      } else {
        cityItem[initials] = [item]
      }
    })
    // console.log(cityItem)
    for (const k in cityItem) {
      // console.log(k)
      const obj = { letter: k, list: cityItem[k] }
      this.cityList.push(obj)
    }
    // console.log(this.cityList)
    this.cityList.sort((a, b) => {
      return a.letter.localeCompare(b.letter)
    })
    this.cityList.forEach(item => {
      this.indexList.push(item.letter)
    })
    console.log(this.cityList)
    // console.log(this.indexList)

    // 热门城市
    const res2 = await hotCity()
    // console.log(res2)
    const obj2 = res2.data.body
    obj2.forEach(item => {
      this.hotList.push(item.label)
    })
    console.log(this.hotList)
  }
}
</script>

<style scoped lang="less">
 /deep/ .van-nav-bar__content {
    background-color: #21b97a;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  /deep/ .van-icon {
    color:#fff
  }
  /deep/ .van-index-bar__index {
  height: 25px;
  }
  /deep/ .van-index-bar__index:active{
    color: #21b97a;
  }
</style>
